<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>

</head>
<body>
<div id="a">
    <!--    页码:<input type="text" v-model="currentPage"><br>-->
    <!--    每页几个:<input type="text" v-model="pageSize"><br>-->
    <!--    userName:<input type="text" v-model="user.username"><br>-->
    <!--    gender:<input type="text" v-model="user.gender"><br>-->
    <!--    email:<input type="text" v-model="user.email"><br>-->

    userName:
    <el-input v-model="user.username" placeholder="请输入userName"></el-input>
    gender:
    <el-input placeholder="请输入gender" v-model="user.gender"></el-input>
    email:
    <el-input placeholder="请输入email" v-model="user.email"></el-input>
    <el-button @click="find">查询</el-button>
    <el-button @click="add">添加</el-button>
    <el-table :data="users" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
            slot-scope：作用域插槽，可以获取表格数据
            scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pp.currentPage"
                :page-sizes="[1, 5, 10, 50]"
                :page-size="pp.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pp.total"
                style="float: right">
        </el-pagination>
    </div>

    <el-dialog title="添加用户"
               :visible.sync="dialogFormVisible">
        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="finalAdd">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改用户"
               :visible.sync="UpdateVisible">
        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id" :disabled="true"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="UpdateVisible = false">取 消</el-button>
            <el-button type="primary" @click="finalUpdate">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script type="text/javascript">
    var v = new Vue({
        el: '#a',
        data: {
            dialogFormVisible: false,
            UpdateVisible: false,
            formData: {},
            pp: {
                currentPage: 1,
                pageSize: 5,
                total: 0
            },
            users: [],
            user: {
                "username": "",
                "gender": "",
                "email": ""
            }
        },
        created() {
            this.find();
        },
        methods: {
            handleUpdate(row) {
                this.formData = {};
                this.$message.error("你点击了编辑按钮");
                this.UpdateVisible = true;
                axios.get("/user/" + row.id).then(res => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                        this.formData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })

            },
            handleDelete(row) {
                this.$message.error("你点击了删除按钮");
                this.$confirm('此操作永久删除当前信息，是否继续？', '提示', {type: 'waring'}).then(() => {
                    axios.delete("/user/" + row.id).then(res => {
                        if (res.data.flag) {
                            this.$message.success(res.data.message);
                            this.find();
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                })

            },
            find() {
                //Result(flag, message,data(users,total))
                axios.post("/user" + "/" + this.pp.currentPage + "/" + this.pp.pageSize, this.user).then(res => {
                    if (res.data.flag === true) {
                        this.$message.success(res.data.message);
                        this.pp.total = res.data.data.total;
                        this.users = res.data.data.users;
                        // console.log(this.users)
                        // console.log(res.data.data.users)
                        // console.log(res.data.data.total)
                        // console.log(this.pp.total)
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            handleSizeChange(number) {
                this.pp.pageSize = number;
                this.find();
            },
            handleCurrentChange(number) {
                this.pp.currentPage = number;
                this.find();
            },
            add() {
                this.formData = {}
                this.dialogFormVisible = true;
            },
            finalAdd() {
                axios.post("/user", this.formData).then(res => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                        this.find();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                this.dialogFormVisible = false;
            },
            finalUpdate() {
                axios.put("/user", this.formData).then(res => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                        this.find();
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
                this.UpdateVisible=false;
            }
        }
    });
</script>

</body>
</html>